Technical review: Document responsive iframe sizing#44598
Technical review: Document responsive iframe sizing#44598chrisdavidmills wants to merge 3 commits into
Conversation
chrisdavidmills
requested review from
estelle and
hamishwillee
and removed request for
a team
github-actions
Bot
added
Content:CSS
chrisdavidmills
changed the title
Preview URLs (6 pages)Flaws (3) Note! 4 documents with no flaws that don't need to be listed. 🎉 Found an unexpected or unresolvable flaw? Please report it here. URL:
URL:
External URLs (2)URL:
URL:
(comment last updated: 2026-07-09 12:19:33) |
|
|
||
| To enable responsive sizing of {{htmlelement("iframe")}} elements based on their content, the [`<meta name="responsive-embedded-sizing">`](/en-US/docs/Web/HTML/Reference/Elements/meta/name/responsive-embedded-sizing) tag can be included in an embedded document to opt it in to sharing its size information with the parent page. The {{cssxref("frame-sizing")}} CSS property can then be set on the `<iframe>` to cause it to adopt the same horizontal or vertical size as the embedded content's actual content size (termed the **internal layout intrinsic size** in the spec). This is useful for avoiding scrollbars on embedded content so that it fits more seamlessly with its embedder. | ||
|
|
||
| To resize the `<iframe>` dynamically as the embedded content changes size, you can call the {{domxref("Window.requestResize()")}} method from the embedded page to make it report an updated size, typically from within the event handler that caused the content to change size. If the `<iframe>` is sized using `frame-sizing`, it will then update its size automatically so that it still neatly contains the embeded content. |
There was a problem hiding this comment.
How about mentioning that the size is updated on DOMContentLoad and Load events automatically, and this method provides additional timing? Is this redundant?
There was a problem hiding this comment.
This is a really good piece of information to include. I've added a new paragraph to the bottom of the description:
The embedded document's layout size is automatically reported once when its {{domxref("Document.DOMContentLoaded_event", "DOMContentLoaded")}} event fires, and again when the {{domxref("Window")}} object's {{domxref("Window.load_event", "load")}} event fires. The
requestResize()method is needed to report subsequent layout size changes.
| To enable responsive sizing of {{htmlelement("iframe")}} elements based on their content, the [`<meta name="responsive-embedded-sizing">`](/en-US/docs/Web/HTML/Reference/Elements/meta/name/responsive-embedded-sizing) tag can be included in an embedded document to opt it in to sharing its size information with the parent page. The {{cssxref("frame-sizing")}} CSS property can then be set on the `<iframe>` to cause it to adopt the same horizontal or vertical size as the embedded content's actual content size (termed the **internal layout intrinsic size** in the spec). This is useful for avoiding scrollbars on embedded content so that it fits more seamlessly with its embedder. | ||
|
|
||
| To resize the `<iframe>` dynamically as the embedded content changes size, you can call the {{domxref("Window.requestResize()")}} method from the embedded page to make it report an updated size, typically from within the event handler that caused the content to change size. If the `<iframe>` is sized using `frame-sizing`, it will then update its size automatically so that it still neatly contains the embeded content. | ||
|
|
There was a problem hiding this comment.
How about also describing it'd raise an error if the child didn't opt-in? Is this too much details?
Please see the CSS spec for requestResize for the details of the errors.
Maybe also nice to mention that, if the parent doesn't opt-in (by the frame-sizing property), it doesn't cause an error, but the iframe will not be resized?
There was a problem hiding this comment.
Good call. I've added an "Exceptions" subsection to describe the error conditions and note the behavior when frame-sizing is not set.
|
|
||
| {{APIRef}} | ||
|
|
||
| The **`requestResize()`** method of the {{domxref("Window")}} interface updates the size information shared by an embedded document with its embedding parent, but only if the embedded page has opted in to sharing its size information. |
There was a problem hiding this comment.
I see it sometimes say "embedded document", "embedded page", or "embedded content". Are they intentionally differentiated?
There was a problem hiding this comment.
No, this is just sloppy inconsistency. I've gone through and used "document" in all places, except where it is inappropriate.
|
Thanks for the review, @kojiishi. I think I've addressed your comments successfully. Let me know if you think anything is needed, or give me an "LGTM" if you are happy with it. |
3 participants
Description
Chrome 149 adds support for responsive iframe sizing; see https://chromestatus.com/feature/5108373464547328 (it says 151, but the feature still seems to be behind a pref, since 149).
This relies on three new features:
frame-sizingpropertyWindow.requestResizemethod<meta name=responsive-embedded-sizing>meta tagThis PR adds docs for all three features.
Motivation
Additional details
Related issues and pull requests